const gulp = require('gulp')
const pug = require("gulp-pug")
const stylus = require('gulp-stylus')
const connect = require('gulp-connect')
const autoprefixer = require('gulp-autoprefixer')
const babel = require('gulp-babel')
const opn = require('opn')

gulp.task('build:lib', function() {
  gulp.src([
    'node_modules/jquery/dist/jquery.min.js',
  ]).pipe(gulp.dest('dist/lib'))
})

gulp.task('build:html', function() {
  gulp.src('src/html/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload())
})

gulp.task('build:img', function() {
  gulp.src('src/img/**/*')
    .pipe(gulp.dest('dist/img'))
    .pipe(connect.reload())
})

gulp.task('build:css', function() {
  gulp.src('src/css/*.styl')
    .pipe(stylus())
    .pipe(autoprefixer())
    .pipe(gulp.dest('dist/css'))
    .pipe(connect.reload())
})

gulp.task('build:js', function() {
  gulp.src('src/js/*.js')
    .pipe(babel({
			presets: ['env']
		}))
    .pipe(gulp.dest('dist/js'))
    .pipe(connect.reload())
})

gulp.task('watch', function(){
  gulp.watch('src/img/**', ['build:img'])
  gulp.watch('src/html/**', ['build:html'])
  gulp.watch('src/css/**', ['build:css'])
  gulp.watch('src/js/**', ['build:js'])
})

gulp.task('build', [
  'build:lib',
  'build:img',
  'build:html',
  'build:css',
  'build:js',
])

gulp.task('connect', function() {
  connect.server({
    root: 'dist',
    port: 3104,
    livereload: true
  })
  opn('http://localhost:3104/')
})

gulp.task('dev', ['build', 'connect', 'watch'])
